<template>
  <div class="page">
    <div class="container">
      <pub-search
        v-model:searchColumns="state.searchColumns"
        v-model:searchForm="state.searchForm"
        mask-append-to="table-container"
        @search="search"
      >
        <template #leftBtn>
          <el-button
            type="primary"
            class="btn-table-add"
            :icon="Plus"
            @click="addHandle"
          >
            新增
          </el-button>
        </template>
      </pub-search>
      <div class="table-container">
        <pub-table
          ref="pubTable"
          :column="columns"
          :data="tableData"
          :loading="tableLoading"
        >
          <template v-slot:option="scope">
            <el-button
              class="btn-row-edit"
              plain
              type="success"
              @click="edit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              plain
              class="btn-row-del"
              type="danger"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              class="btn-row-add"
              plain
              type="primary"
              @click="addChildDict(scope.row)"
            >
              添加子级
            </el-button>
            <el-button
              class="btn-row-edit"
              plain
              type="success"
              @click="editChildren(scope.row)"
            >
              编辑子级
            </el-button>
            <el-button
              plain
              class="btn-row-del"
              type="danger"
              @click="delChildrenDicts(scope.row.code)"
            >
              删除子级
            </el-button>
          </template>
        </pub-table>
        <pub-pagination
          :total="total"
          v-model:page="state.searchForm.pageNum"
          v-model:limit="state.searchForm.pageSize"
          @pagination="initPage"
        />
      </div>
    </div>
    <pub-dialog
      v-if="addDialogVisible"
      title="添加字典"
      v-model:visible="addDialogVisible"
      width="900px"
    >
      <add
        @cancel="cancelHandle"
        :idAddChild="idAddChild"
        :parentType="parentType"
        :currentPid="currentPid"
      />
    </pub-dialog>
    <pub-dialog
      v-if="editDialogVisible"
      title="编辑字典"
      v-model:visible="editDialogVisible"
      width="900px"
    >
      <editDialog
        @cancel="cancelEditHandle"
        :idEditChild="idEditChild"
        :currentPid="currentPid"
        :currentCode="currentCode"
      />
    </pub-dialog>
    <pub-dialog
      v-if="deleteDialogVisible"
      title="删除字典"
      v-model:visible="deleteDialogVisible"
      width="900px"
    >
      <deleteDialog @cancel="cancelDeleteHandle" :currentCode="currentCode" />
    </pub-dialog>
  </div>
</template>

<script>
export default {
  name: 'dicList'
}
</script>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import add from './components/add.vue'
import editDialog from './components/edit.vue'
import deleteDialog from './components/delete.vue'
import { getDictList, deleteDictById } from '@/api/system'
import { ref, reactive, toRefs, onMounted } from 'vue'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
// const pubTable = ref()
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const tableLoading = ref(false)
const idAddChild = ref(false)
const idEditChild = ref(false)
const currentPid = ref('')
const parentType = ref('')
const currentCode = ref('')
const tableData = ref([])
const total = ref(0)
const columns = ref([
  { label: '字典名称', prop: 'name' },
  { label: '字典编码', prop: 'code' },
  { label: '字典状态', prop: 'status', type: 'formatDict', formatCode: 'ZDZT' },
  { label: '字典类型', prop: 'type', type: 'formatDict', formatCode: 'ZDLX' },
  { label: '操作', type: 'option', width: '380' }
])
const state = reactive({
  searchForm: {
    pageSize: 15,
    pageNum: 1
  },
  searchColumns: [
    {
      label: '字典名称',
      el: 'Input',
      bind: 'name',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '字典编码',
      el: 'Input',
      bind: 'code',
      defaultValue: '',
      labelWidth: 80
    },

    {
      label: '字典类型',
      el: 'DictSelect',
      bind: 'type',
      defaultValue: '',
      code: 'ZDLX',
      labelWidth: 110
    }
  ]
})

const initPage = async () => {
  let res = await getDictList(state.searchForm)
  if (res.succeed) {
    tableData.value = res.data
    total.value = res.total
  }
}

onMounted(() => {
  initPage()
})

const search = () => {
  state.searchForm.pageNum = 1
  initPage()
}
const edit = row => {
  currentPid.value = row.id
  currentCode.value = row.code
  idEditChild.value = false
  editDialogVisible.value = true
}

const editChildren = row => {
  currentPid.value = row.id
  currentCode.value = row.code
  idEditChild.value = true
  editDialogVisible.value = true
}

const delChildrenDicts = code => {
  currentCode.value = code
  deleteDialogVisible.value = true
}

// 删除字典
const del = id => {
  ElMessageBox.confirm('确认删除选择的记录？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    confirmButtonClass: 'btn-row-edit',
    cancelButtonClass: 'btn-row-close',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteDictById(id)
      if (res.succeed) {
        initPage()
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      }
    })
    .catch(() => {})
}

const addChildDict = row => {
  currentPid.value = row.id
  parentType.value = row.type
  idAddChild.value = true
  addDialogVisible.value = true
}
const addHandle = () => {
  idAddChild.value = false
  parentType.value = ''
  currentPid.value = ''
  addDialogVisible.value = true
}

const cancelHandle = () => {
  addDialogVisible.value = false
  initPage()
}
const cancelEditHandle = () => {
  editDialogVisible.value = false
  initPage()
}
const cancelDeleteHandle = () => {
  deleteDialogVisible.value = false
  initPage()
}
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 90px);
}
</style>
